import React,{useState} from "react";
import {HelloComponent} from './hello';
import {NameEditComponent} from './nameedit'

// ts 让我们在写的时候就发现问题
// ts js 的超集
const App=()=>{
  const [name,setname] =useState('defaultUserName');
  const setUsernameState=(newName:string)=>{
    setname(newName);
  }
  return (
    <>
      <HelloComponent userName={name} />
      <NameEditComponent initialUserName={name} onNameUpdated={setUsernameState} />
    </>
  )
}

export default App;


// import React,{useState} from 'react';
// import logo from './logo.svg';
// import './App.css';

// type UserInfo={name:string,age:number,sex:string};
// type GameInfo={score:number,win:boolean};
// // type Counter={num:number}

// // ts的开始：任意类型

// const Counter:React.FC<{num:number}>=({num})=>{
//   const [count,setcount]=useState(num);
//   return (
//     <>
//       <div>{count}</div>
//       <button onClick={()=>setcount(count+1)}>加</button>
//       <button onClick={()=>setcount(count-1)}>减</button>
//     </>
//   )
// }

// // 泛指函数FC组件内部props{} UserInfo
// const User:React.FC<UserInfo>=({name,age,sex})=>{
//   return (
//     <div className="User">
//       <p>{name}</p>
//       <p>{age}</p>
//       <p>{sex}</p>
//     </div>
//   )
// }

// // JS -> TS
// // 自定义类型
// type ArticleInfo={
//   title:string,
//   content:string
// }

// const Article:React.FC<ArticleInfo>=({title,content})=>{
//   return (
//     <article>
//       <header>
//         <h1>{title}</h1>
//       </header>
//       <main>{content}</main>
//     </article>
//   )
// }

// function App() {
//   return (
//     <div className="App">
//       <Article title='标题' content="内容" />
//       {/* <User name="杨执信" age={18} sex="nan" />
//       <Counter num={1} /> */}
//     </div>
//   );
// }

// export default App;
